<script setup lang="ts">
import { useUserStore } from '@/stores'
import { ref, computed } from 'vue'
import type { LoginData, WxLoginResponseData } from '@/apis/user/type'
import { getWxLoginService } from '@/apis/user'
const userStore = useUserStore()

const scene = ref(1)
// 表单数据
const formModel = ref<LoginData>({
  phone: '18883799646',
  code: ''
})
const rules = ref({
  phone: [
    {
      required: true,
      message: '请输入手机号码',
      trigger: 'blur'
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }
  ],
  code: [
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value) {
          callback(new Error('请输入验证码'))
        } else if (value.length !== 6) {
          callback(new Error('请输入6位验证码'))
        } else if (value !== userStore.smsCode) {
          callback(new Error('验证码不正确'))
        } else {
          callback()
        }
      }
    }
  ]
})

//
const isPhone = computed(() => {
  return /^1[3456789]\d{9}$/.test(formModel.value.phone)
})
// 获取验证码
const disabled = ref(false)
const time = ref(5)
const getCode = async () => {
  if (!isPhone.value) return
  time.value = 5
  disabled.value = true
  await userStore.getSmsCode(formModel.value.phone)
  let timer = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      disabled.value = false
      clearInterval(timer)
    }
  }, 1000)
  formModel.value.code = userStore.smsCode
}

// 绑定form
const formRef = ref()
const goLogin = async () => {
  await formRef.value.validate()
  await userStore.goLogin(formModel.value)
  userStore.dialogVisible = false
}
const onClose = () => {
  userStore.dialogVisible = false
}
const closeDialog = () => {
  scene.value = 1
  formModel.value = {
    phone: '',
    code: ''
  }
  formRef.value.resetFields()
}

// 微信登录码
const changeScene = async () => {
  scene.value = 0
  // encode
  const redirect = encodeURIComponent(window.location.origin + '/wxlogin')
  const res: WxLoginResponseData = await getWxLoginService(redirect)
  // @ts-ignore
  new WxLogin({
    self_redirect: true,
    id: 'login-container',
    appid: res.data.appid,
    scope: 'snsapi_login',
    redirect_uri: res.data.redirectUri,
    state: res.data.state,
    style: 'black'
  })
}
</script>

<template>
  <el-dialog
    title="用户登录"
    v-model="userStore.dialogVisible"
    @closed="closeDialog"
  >
    <el-row
      style="
        border-top: 1px solid #eeeaea;
        padding-top: 20px;
        border-bottom: 1px solid #eeeaea;
      "
    >
      <el-col :span="12" style="height: 450px">
        <el-card>
          <el-form
            v-show="scene"
            ref="formRef"
            status-icon
            :model="formModel"
            :rules="rules"
          >
            <el-form-item prop="phone"
              ><el-input
                v-model="formModel.phone"
                prefix-icon="User"
                placeholder="请输入手机号码"
              ></el-input
            ></el-form-item>
            <el-form-item prop="code"
              ><el-input
                prefix-icon="Lock"
                v-model="formModel.code"
                placeholder="请输入手机验证码"
              ></el-input
            ></el-form-item>
            <el-form-item
              ><el-button
                :disabled="!isPhone || disabled"
                @click="getCode"
                style="width: 100px"
                >{{ disabled ? `${time}秒后重试` : '获取验证码' }}</el-button
              ></el-form-item
            >
            <el-form-item>
              <el-button
                type="primary"
                style="width: 100%"
                :disabled="!isPhone"
                @click="goLogin"
                >用户登录</el-button
              >
            </el-form-item>
            <el-form-item style="text-align: center">
              <h3 style="width: 100%"><span>微信扫码登录</span></h3>
              <svg
                @click="changeScene"
                style="margin: 0 auto; cursor: pointer"
                t="1725185050145"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4482"
                width="32"
                height="32"
              >
                <path
                  d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                  fill="#d81e06"
                  p-id="4483"
                ></path>
                <path
                  d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                  fill="#d81e06"
                  p-id="4484"
                ></path>
              </svg>
            </el-form-item>
          </el-form>
          <!-- scene = 0 -->
          <div v-show="!scene" class="webchat">
            <div id="login-container" style="text-align: center"></div>
            <div class="text" style="text-align: center">
              <p style="margin-bottom: 5px">手机短信验证码登录</p>
              <el-button
                type="danger"
                icon="Iphone"
                circle
                @click="scene = 1"
              ></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="right-col">
        <el-row style="margin-left: 8%">
          <el-col :span="12" class="left">
            <img src="@/assets/images//code_login_wechat.png" alt="" />
            <el-text tag="p"
              ><el-icon><ChatDotRound /></el-icon>
            </el-text>
            <el-text tag="p">微信扫一扫关注</el-text>
            <el-text tag="p">“快速预约挂号”</el-text>
          </el-col>
          <el-col :span="12" class="right">
            <img src="@/assets/images//code_app.png" alt="" />
            <el-text tag="p"
              ><el-icon><Iphone /></el-icon>
            </el-text>
            <el-text tag="p">扫一扫下载</el-text>
            <el-text tag="p">“预约挂号APP”</el-text>
          </el-col>
        </el-row>
        <div class="bottom">
          <el-text tag="p">官方指定平台</el-text>
          <el-text tag="p">快速挂号&nbsp;&nbsp;安全放心</el-text>
        </div>
      </el-col>
    </el-row>

    <template #footer>
      <el-button @click="onClose">关闭窗口</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.right-col {
  .left,
  .right {
    text-align: center;
    img {
      height: 150px;
      width: 150px;
    }
    .el-text {
      height: 30px;
      line-height: 30px;
    }
  }
}
.bottom {
  text-align: center;
  margin-top: 20px;
  .el-text {
    margin: 40px;
    font-size: 30px;
    font-style: italic;
    height: 30px;
    line-height: 30px;
  }
}
</style>
